<template>
  <div>
    <div class="userinfo-box">
      <Form
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="80"
      >
        <FormItem label="昵称" prop="nickName">
          <Input v-model="formValidate.nickName" placeholder="请输入昵称" />
        </FormItem>
        <FormItem label="年龄" prop="age">
          <Input v-model="formValidate.age" placeholder="请输入年龄" />
        </FormItem>

        <FormItem label="出生日期" prop="birthday">
          <DatePicker
            type="date"
            placeholder="请选择出生日期"
            v-model="formValidate.birthday"
            style="float: left"
          ></DatePicker>
        </FormItem>
        <FormItem label="头像" prop="headImage">
          <Upload
            ref="upload"
            :show-upload-list="false"
            :before-upload="handleBeforeUpload"
            :on-success="handleSuccess"
            :on-error="handleError"
            :format="['jpg', 'jpeg', 'png']"
            :accept="'.png,.jpg,.jpeg'"
            :max-size="1024"
            :on-format-error="handleFormatError"
            :on-exceeded-size="handleMaxSize"
            :action="$axios.defaults.baseURL + '/uploadImage'"
            style="display: inline-block; width: 82px"
          >
            <div
              class="ivu-upload ivu-upload-drag"
              style="margin-left: -210px; width: 400px; height: 100px"
            >
              <Icon
                type="ios-cloud-upload"
                size="52"
                style="color: #3399ff"
              ></Icon>
              <p>拖拽或点击此处上传图片</p>
            </div>
          </Upload>
          <!-- <Input
            v-model="formValidate.headImage"
            placeholder="请输入网络地址,如:https://timgsa.baidu.com/......asd.jpg"
          /> -->
        </FormItem>
        <img
          width="300"
          height="300"
          :src="formValidate.headImage"
          style="
            margin-bottom: 30px;
            margin-left: -30px;
            border: 1px solid #d3d3d3;
            border-radius: 10px;
          "
        />
        <FormItem style="margin-left: -90px">
          <Button type="primary" @click="handleSubmit('formValidate')"
            >提交</Button
          >
          <Button @click="handleReset('formValidate')" style="margin-left: 8px"
            >清空</Button
          >
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'User',
  data () {
    return {
      formValidate: {
        userId: '',
        nickName: '',
        age: '',
        birthday: '',
        username: '',
        headImage: 'http://bbs.17173.com/uc/avatar.php?uid=140776857&size=big',
        registerDate: ''

      },
      ruleValidate: {
        nickName: [
          { required: true, message: '昵称不能为空', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' }
        ],
        birthday: [
          { required: true, type: 'date', message: 'Please select the date', trigger: 'change' }
        ]
      }
    }
  },
  mounted () {
    var _this = this // 临时变量
    this.$axios({
      method: 'post',
      url: '/login/success'
    }).then(function (response) {
      console.log(response)
      if (!response.data.result) {
        _this.$router.push('/loginAuth')
        return
      }
      console.log(response.data.result)
      _this.formValidate.userId = response.data.result.userId
      if (_this.formValidate.headImage.length > 0) { _this.formValidate.headImage = response.data.result.headImage }
      _this.formValidate.nickName = response.data.result.nickName
      _this.formValidate.age = response.data.result.age + ''
      _this.formValidate.roleId = response.data.result.roleId
      _this.formValidate.birthday = response.data.result.birthday
      // _this.formValidate.passWord = response.data.result.passWord
    })
  },
  methods: {
    // 准备上传
    handleBeforeUpload (file) {
      // const that = this
      console.log(file)
      // return util.checkImageWH(file, 46, 46, function () {
      //   that.$Notice.warning({
      //     title: '文件尺寸限制',
      //     desc: '文件大小不超过46*46像素.'
      //   })
      // })
    },
    // 上传时
    handleProgress (event, file) {
      // this.$Notice.info({
      //   title: '文件正在上传',
      //   desc: '文件 ' + file.name + ' 正在上传。'
      // })
    },
    // 上传图片
    handleSuccess (res, file) {
      console.log(res)
      // this.$Notice.success({
      //   title: '文件上传成功',
      //   desc: '文件 ' + file.name + ' 上传成功。'
      // })
      this.$data.formValidate.headImage = this.$imageURL + res.result
    },
    // 上传失败
    handleError (event, file) {
      this.$Notice.error({
        title: '文件上传失败',
        desc: '文件 ' + file.name + ' 上传失败。'
      })
    },
    handleRemove (index) {
      // 从 upload 实例删除数据
      this.changeBtnImg = index
    },
    handleFormatError (file) {
      this.$Notice.warning({
        title: '格式错误!',
        desc: ' 文件只能是jpg、png、jpeg'
      })
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: '文件大小限制',
        desc: '文件大小不超过2mb.'
      })
    },
    handleSubmit (name) {
      console.log(this.formValidate.headImage)
      this.$refs[name].validate((valid) => {
        var _this = this
        if (valid) {
          // var _this = this // 临时变量
          this.$axios.post('/updateInformation', {
            userId: this.formValidate.userId,
            age: this.formValidate.age,
            nickName: this.formValidate.nickName,
            birthday: this.formValidate.birthday,
            // passWord: this.formValidate.passWord,
            headImage: this.formValidate.headImage
          }
          ).then(function (response) {
            if (response.data.code === 1) {
              _this.$Message.info('更新成功！')
              location.reload()
            } else {
              _this.$Message.error('更新失败!')
            }
          })
        } else {
          this.$Message.info('请检查表单是否有误')
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.userinfo-box {
  margin-top: 5%;
  margin-left: 35%;
  width: 30%;
  height: 50em;
  border: 1px soild grey;
  border-radius: 20px;
}
.userinfo-item {
  width: 20%;
  margin-bottom: 5%;
}
</style>
